<script>
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import { cloneDeep, debounce } from 'lodash'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { TreeSelect } from 'ant-design-vue'
import API from './../../api/proof'
import { getQueryString } from 'cupshe-utils'
// import { getQueryString } from 'cupshe-utils'
moment.fn.toISOString = function () {
  return this.format('YYYY-MM-DDTHH:mm:ss.SSS[Z]')
}
export default {
  name: 'SearchForm',
  props: {
    searchName: {
      type: String,
      default: ''
    },
    resetName: {
      type: String,
      default: ''
    },
    defaultSearchParams: {
      //  可携带参数
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    hasDefaultTime: {
      type: Boolean,
      default: true
    },
    propDefaultTime: {
      type: Array,
      default: () => [
        moment(
          new Date(Date.now() - 90 * 24 * 3600 * 1000).toLocaleString(
            'chinese',
            { hour12: false }
          )
        ).format('YYYY-MM-DD 00:00:00'),
        moment(
          new Date(Date.now() + 3600 * 1000).toLocaleString('chinese', {
            hour12: false
          })
        ).format('YYYY-MM-DD 23:59:59')
      ]
    },
    formList: {
      /**
       * label
       * type
       * name
       * outputData
       */
      type: Array,
      default: () => []
    }
  },
  data() {
    this.selectSearch = debounce(this.selectSearch, 800)
    this.remoteSelectSearch = debounce(this.remoteSelectSearch, 500)
    return {
      lang: window.localStorage.lang === 'en-GB',
      len: 100,
      lenLimit: 5,
      ss: 'ss',
      labelLength: 8,
      locale,
      divId: 'Ma' + Date.now(),
      formInput: {},
      time: '',
      mode2: ['month', 'month'],
      defaultTime: [
        moment(
          new Date(Date.now() - 90 * 24 * 3600 * 1000).toLocaleString(
            'chinese',
            { hour12: false }
          )
        ).format('YYYY-MM-DD 00:00:00'),
        moment(
          new Date(Date.now() + 3600 * 1000).toLocaleString('chinese', {
            hour12: false
          })
        ).format('YYYY-MM-DD 23:59:59')
      ],
      customParams: {},
      yearOpen: false,
      selectInSearchOptions: [],
      remoteSearchOptions: [],
      selectInSearchLoading: false
    }
  },
  computed: {
    selectWidth() {
      return 'width:100%'
      // return (
      //   'max-width:300px;width:calc( 100% - ' +
      //   (this.labelLength + 2) +
      //   'em + 3px'
      // )
    },
    listInfo() {
      return this.formList.slice(0, this.len).map((inputData, index) => {
        return this.handleInputType(inputData)
      })
    }
  },
  // created() {},
  watch: {
    formList: {
      handler(val) {
        if (this.hasDefaultTime) {
          this.defaultTime = []
          this.defaultTime.push(...this.propDefaultTime)
        } else {
          this.defaultTime = [null, null]
        }

        this.time = moment(new Date()).format('YYYY-MM-DD')
        val.forEach(_ => {
          // this.labelLength = Math.max(_.label.length, this.labelLength)
          if (this.defaultSearchParams && _.default) {
            // this.formInput[_.name] = _.default
            this.$set(this.formInput, _.name, _.default)
            delete _.default
          }
          _.type === 'datePicker' && (this.formInput[_.name] = this.defaultTime)
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    toggle(e) {
      this.len = this.len === this.lenLimit ? 100 : this.lenLimit
      this.$emit('hideSerach')
    },
    /** ()
     * switch 显示筛选表类型
     * input
     * data picker
     * select
     * v-model 动态更新
     */
    setMoment(val) {
      return moment(
        new Date(val).toLocaleString('chinese', { hour12: false }),
        'YYYY-MM-DD HH:mm:ss'
      )
    },
    handleInputType(inputData) {
      const {
        format = 'YYYY-MM-DD HH:mm:ss',
        type = 'input',
        label: labelVal,
        columnField = '',
        name = '',
        placeholder = '',
        showAll = true,
        options = [],
        defaultValue = '',
        outputVariable = [],
        mode = 'default',
        changeOnSelect = false,
        name1 = '',
        name2 = '',
        labelName = 'label',
        valueName = 'value',
        maxTagCount = 1,
        fn = () => {
          console.log('下拉事件触发')
        },
        menuName = '',
        apiUrl = '',
        showSearch = false,
        searchField = '',
        apiParams = {},
        fieldLabel = '',
        fieldLabelValue = 'id',
        respField = 'data',
        toolTip = null
      } = inputData
      const $style = this.$style
      const labelLength = this.labelLength
      const flexDefaultConfig = `0 1 ${labelLength + 3}em`
      const label = this.$t(labelVal)
      switch (type) {
        //  <a-month-picker placeholder="Select month" @change="onChange" />
        case 'month':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} style="flex:1">
                  <a-month-picker
                    value-format="YYYY-MM"
                    v-model_trim={this.formInput[name]}
                    placeholder={placeholder || '请输入'}
                    style="width: 100%"
                  />
                </a-col>
              </a-row>
            </a-col>
          )
        case 'year':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} flex="1">
                  <a-date-picker
                    format="YYYY"
                    mode="year"
                    value={this.formInput[name]}
                    open={this.yearOpen}
                    placeholder={placeholder || '请输入'}
                    style="width: 100%"
                    onOpenChange={this.yearOpenChange}
                    onChange={value => this.yearChange(value, name)}
                    onPanelChange={value =>
                      this.yearPanelChange(value, outputVariable, name)
                    }
                  />
                </a-col>
              </a-row>
            </a-col>
          )
        case 'monthRange':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} flex="1">
                  <a-range-picker
                    format="YYYY-MM"
                    placeholder={['开始月份', '结束月份']}
                    value={this.formInput[name]}
                    mode={this.mode2}
                    onChange={value =>
                      this.monthRangeChange(value, outputVariable, name)
                    }
                    onPanelChange={(value, mode) =>
                      this.handlePanelChange(value, mode, outputVariable, name)
                    }
                  />
                </a-col>
              </a-row>
            </a-col>
          )
        case 'date':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} flex="1">
                  <a-date-picker
                    style="width:100%;"
                    value-format="YYYY-MM-DD"
                    v-model_trim={this.formInput[name]}
                    placeholder={placeholder || '请输入'}
                  />
                </a-col>
              </a-row>
            </a-col>
          )
        case 'input':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} flex="1">
                  <a-input
                    v-model_trim={this.formInput[name]}
                    placeholder={placeholder || '请输入'}
                    class={name}
                    defaultValue={defaultValue}
                  />
                </a-col>
              </a-row>
            </a-col>
          )
        case 'radio':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} flex="1">
                  <div
                    style="line-height:32px;"
                    data-cupshe="cupshe-1628951047"
                  >
                    <a-radio-group
                      v-model_trim={this.formInput[name]}
                      options={options}
                    />
                  </div>
                </a-col>
              </a-row>
            </a-col>
          )
        case 'inputRange':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} flex="1">
                  <a-input-number
                    style="width:45%"
                    v-model_trim={this.formInput[name1]}
                    placeholder={placeholder || '请输入'}
                    class={name}
                  />{' '}
                  ~
                  <a-input-number
                    style="width:45%"
                    onChange={() => {
                      this.changeInputRange(
                        this.formInput[name1],
                        this.formInput[name2],
                        label
                      )
                    }}
                    v-model_trim={this.formInput[name2]}
                    placeholder={placeholder || '请输入'}
                    class={name}
                  />
                </a-col>
              </a-row>
            </a-col>
          )
        case 'datePicker':
          return (
            <a-col class={$style.col} span={format === 'YYYY-MM-DD' ? 8 : 11}>
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col
                  class={format === 'YYYY-MM-DD' ? $style.maxWidth : ''}
                  flex="1"
                >
                  <a-range-picker
                    style="flex:1;width:100%;"
                    ref={name}
                    show-time={
                      format === 'YYYY-MM-DD'
                        ? false
                        : {
                            defaultValue: [
                              moment(null, 'YYYY-MM-DD 00:00:00'),
                              moment(null, 'YYYY-MM-DD HH:mm:ss')
                            ]
                          }
                    }
                    v-model={this.formInput[name]}
                    default-value={
                      this.hasDefaultTime
                        ? [
                            moment(this.defaultTime[0], 'YYYY-MM-DD 00:00:00'),
                            moment(this.defaultTime[1], 'YYYY-MM-DD HH:mm:ss')
                          ]
                        : [null, null]
                    }
                    format={format}
                    onChange={(_date, dateString) =>
                      this.onDatePicker(dateString, outputVariable, name)
                    }
                  />
                </a-col>
              </a-row>
            </a-col>
          )
        /**
         *  locale={this.locale} */
        case 'select':
          if (toolTip) {
            return (
              <a-col class={$style.col} span="8">
                <a-row type="flex" justify="start" align="middle">
                  <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                    <a-tooltip>
                      <template slot="title">{toolTip}</template>
                      <a-icon type="question-circle" />
                    </a-tooltip>
                    {label}：
                  </a-col>
                  <div class={$style.maxWidth} flex="1" style="flex:1">
                    <a-select
                      placeholder={placeholder || '请选择'}
                      mode={mode}
                      showSearch
                      allowClear
                      tokenSeparators={[' ']}
                      onChange={() => {
                        this.changeSelect(
                          fn(this.formInput[name], name, inputData, options)
                        )
                      }}
                      optionFilterProp="children"
                      // filterOption={this.filterOption}
                      v-model={this.formInput[name]}
                      style="width: 100%"
                      default-value={defaultValue}
                      maxTagCount={maxTagCount}
                    >
                      {showAll ? (
                        <a-select-option value=""> 全部</a-select-option>
                      ) : (
                        ''
                      )}
                      {options.map(item => {
                        if (typeof item === 'string') {
                          return (
                            <a-select-option value={item}>
                              {item}
                            </a-select-option>
                          )
                        } else {
                          return (
                            <a-select-option value={item[valueName]}>
                              {item[labelName]}
                            </a-select-option>
                          )
                        }
                      })}
                    </a-select>
                  </div>
                </a-row>
              </a-col>
            )
          } else {
            return (
              <a-col class={$style.col} span="8">
                <a-row type="flex" justify="start" align="middle">
                  <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                    {label}：
                  </a-col>
                  <div class={$style.maxWidth} flex="1" style="flex:1">
                    <a-select
                      placeholder={placeholder || '请选择'}
                      mode={mode}
                      showSearch
                      allowClear
                      tokenSeparators={[' ']}
                      onChange={() => {
                        this.changeSelect(
                          fn(this.formInput[name], name, inputData, options)
                        )
                      }}
                      optionFilterProp="children"
                      // filterOption={this.filterOption}
                      v-model={this.formInput[name]}
                      style="width: 100%"
                      default-value={defaultValue}
                      maxTagCount={maxTagCount}
                    >
                      {showAll ? (
                        <a-select-option value=""> 全部</a-select-option>
                      ) : (
                        ''
                      )}
                      {options.map(item => {
                        if (typeof item === 'string') {
                          return (
                            <a-select-option value={item}>
                              {item}
                            </a-select-option>
                          )
                        } else {
                          return (
                            <a-select-option value={item[valueName]}>
                              {item[labelName]}
                            </a-select-option>
                          )
                        }
                      })}
                    </a-select>
                  </div>
                </a-row>
              </a-col>
            )
          }

        case 'remoteSearch': {
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} class={$style.label}>
                  {label}：
                </a-col>
                <div class={$style.maxWidth} flex="1" style="flex:1">
                  <a-select
                    allowClear
                    v-model={this.formInput[name]}
                    default-value={defaultValue}
                    style="width: 100%"
                    showSearch
                    maxTagTextLength={4}
                    mode={mode}
                    tokenSeparators={[' ']}
                    maxTagCount={maxTagCount}
                    placeholder={placeholder || '请选择'}
                    filter-option={false}
                    not-found-content={
                      this.selectInSearchLoading ? undefined : null
                    }
                    onSearch={value =>
                      this.remoteSelectSearch(
                        columnField,
                        label,
                        value,
                        menuName
                      )
                    }
                  >
                    <a-spin
                      v-if={this.selectInSearchLoading}
                      slot="notFoundContent"
                      size="small"
                    />
                    {options.map(item => {
                      return (
                        <a-select-option value={item.value}>
                          {item.key}
                        </a-select-option>
                      )
                    })}
                  </a-select>
                </div>
              </a-row>
            </a-col>
          )
        }
        case 'selectInSearch': {
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <div class={$style.maxWidth} flex="1" style="flex:1">
                  <a-select
                    placeholder={placeholder || '请选择'}
                    mode={mode}
                    showSearch
                    filter-option={false}
                    not-found-content={
                      this.selectInSearchLoading ? undefined : null
                    }
                    v-model={this.formInput[name]}
                    style="width: 100%"
                    default-value={defaultValue}
                    onSearch={value => this.selectSearch(value, options)}
                  >
                    {showAll ? (
                      <a-select-option value=""> 全部</a-select-option>
                    ) : (
                      ''
                    )}
                    <a-spin
                      v-if={this.selectInSearchLoading}
                      slot="notFoundContent"
                      size="small"
                    />
                    {this.selectInSearchOptions.map(item => {
                      return (
                        <a-select-option value={item[valueName]}>
                          {item[labelName]}
                        </a-select-option>
                      )
                    })}
                  </a-select>
                </div>
              </a-row>
            </a-col>
          )
        }
        case 'cascader':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} flex="1">
                  <a-cascader
                    options={options}
                    placeholder="请输入"
                    style="width: 100%;"
                    v-model={this.formInput[name]}
                    change-on-select={changeOnSelect}
                    onChange={value => this.cascaderChange(name, value)}
                    onFocus={() => this.cascaderFocus(name)}
                  />
                </a-col>
              </a-row>
            </a-col>
          )
        case 'empty':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col
                  flex={flexDefaultConfig}
                  ddddd
                  class={$style.label}
                ></a-col>
                <a-col class={$style.maxWidth} flex="1"></a-col>
              </a-row>
            </a-col>
          )
        case 'PositivNumber':
          if (toolTip) {
            return (
              <a-col class={$style.col} span="8">
                <a-row type="flex" justify="start" align="middle">
                  <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                    <a-tooltip>
                      <template slot="title">{toolTip}</template>
                      <a-icon type="question-circle" />
                    </a-tooltip>
                    {label}：
                  </a-col>
                  <a-col class={$style.maxWidth} flex="1">
                    <a-input-number
                      style="width:100%"
                      v-model_trim={this.formInput[name]}
                      placeholder={placeholder || '请输入'}
                      class={name}
                      min={0}
                      defaultValue={defaultValue}
                    />
                  </a-col>
                </a-row>
              </a-col>
            )
          } else {
            return (
              <a-col class={$style.col} span="8">
                <a-row type="flex" justify="start" align="middle">
                  <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                    {label}：
                  </a-col>
                  <a-col class={$style.maxWidth} flex="1">
                    <a-input-number
                      style="width:100%"
                      v-model_trim={this.formInput[name]}
                      placeholder={placeholder || '请输入'}
                      class={name}
                      min={0}
                      defaultValue={defaultValue}
                    />
                  </a-col>
                </a-row>
              </a-col>
            )
          }
        case 'Number':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} flex="1">
                  <a-input-number
                    style="width:100%"
                    min={1}
                    v-model_trim={this.formInput[name]}
                    placeholder={placeholder || '请输入'}
                    class={name}
                    defaultValue={defaultValue}
                  />
                </a-col>
              </a-row>
            </a-col>
          )

        case 'treeSelect':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} flex="1">
                  <a-tree-select
                    treeNodeFilterProp={'label'}
                    v-model={this.formInput[name]}
                    tree-data={options}
                    show-search
                    style="width: 100%"
                    placeholder="请输入"
                    allow-clear
                    treeCheckable
                    showCheckedStrategy={TreeSelect.SHOW_CHILD}
                    max-tag-count={1}
                    dropdown-style={{ maxHeight: '300px', overflow: 'auto' }}
                  />
                </a-col>
              </a-row>
            </a-col>
          )
        case 'cpsSelect':
          return (
            <a-col class={$style.col} span="8">
              <a-row type="flex" justify="start" align="middle">
                <a-col flex={flexDefaultConfig} ddddd class={$style.label}>
                  {label}：
                </a-col>
                <a-col class={$style.maxWidth} flex="1">
                  <cps-select
                    immediate
                    style="width: 100%"
                    v-model={this.formInput[name]}
                    params={apiParams}
                    showSearch={showSearch}
                    searchField={searchField}
                    url={apiUrl}
                    mode={mode}
                    optionFilterProp="children"
                    tokenSeparators={[' ']}
                    maxTagCount={maxTagCount}
                    label={fieldLabel}
                    labelValue={fieldLabelValue}
                    respField={respField}
                  ></cps-select>
                </a-col>
              </a-row>
            </a-col>
          )
        default:
          return null
      }
    },
    search(flag) {
      console.log('search ----')
      setTimeout(() => {
        if (this.disabled) {
          this.$message.warning('数据加载中，请勿重复查询……')
          return
        }
        const formInput = {}
        this.setParams(formInput)
        this.$emit('search', {
          ...formInput,
          needSave: flag === true,
          ...this.customParams
        })
      }, 200)
    },
    searchWithParams(params) {
      setTimeout(() => {
        if (this.disabled) {
          this.$message.warning('数据加载中，请勿重复查询……')
          return
        }
        const formInput = {}
        this.setParams(formInput)
        this.customParams = params
        this.$emit('search', { ...formInput, ...params })
      }, 200)
    },
    setParams(params = {}) {
      const transformParams = {}
      const formInput = cloneDeep(this.formInput)
      this.formList.forEach(item => {
        if (item.type === 'datePicker') {
          delete formInput[item.name]
        }
        if (item.transform && formInput[item.name]) {
          // 数据格式转化，方法在父组件自定义，方法名 transform
          transformParams[item.name] = item.transform(formInput[item.name])
        }
      })

      params && Object.assign(params, formInput, transformParams)
    },
    changeSelect(fn) {
      fn && fn()
      this.$forceUpdate()
    },
    reset() {
      // this.formInput = {}
      const obj = {}
      this.formList.forEach(_ => {
        if (_.type === 'datePicker') {
          this.defaultTime[0] && (obj[_.name] = this.defaultTime)
          !this.defaultTime[0] && delete obj[_.name]
        }
        if (_.type === 'remoteSearch') {
          _.options = []
        }
      })
      this.formInput = obj
      console.log(obj)

      this.$emit('search', { ...obj, ...this.customParams }, 'clearPage')
    },
    changeInputRange(start, end, label) {
      if (end && start) {
        if (end < start) {
          this.$message.warning(`${label}开始数量不能大于结束数量`)
          start = ''
        }
      }
    },
    onDatePicker(dateString, outputVariable, name) {
      // this.formInput[name] =  [this.setMoment(dateString[0]), this.setMoment(dateString[1])]
      this.$forceUpdate()
      this.formInput[outputVariable[0]] = dateString[0]
      this.formInput[outputVariable[1]] = dateString[1]
      console.log(this.formInput)
    },
    cascaderChange(name, value) {
      this.formInput[name] = value
    },
    cascaderFocus(name) {
      this.$emit('cascaderFocus', name)
    },
    monthRangeChange(value, outputVariable, name) {
      this.formInput[name] = value
      this.formInput[outputVariable[0]] = moment(value[0]).format('YYYY-MM')
      this.formInput[outputVariable[1]] = moment(value[1]).format('YYYY-MM')
    },
    handlePanelChange(value, mode, outputVariable, name) {
      this.mode2 = [
        mode[0] === 'date' ? 'month' : mode[0],
        mode[1] === 'date' ? 'month' : mode[1]
      ]
      this.formInput[name] = value
    },
    yearPanelChange(value, outputVariable, name) {
      this.formInput[name] = value || null
      this.formInput[outputVariable[0]] = moment(value).format('YYYY')
      this.yearOpen = false
    },
    yearOpenChange(status) {
      this.yearOpen = status
    },
    yearChange(value, name) {
      delete this.formInput[name]
      this.$forceUpdate()
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    async remoteSelectSearch(columnField, label, value, menuName) {
      const params = {
        menuName: menuName || '产品开发管理',
        columnName: columnField || label,
        queryStr: value
      }
      this.selectInSearchLoading = true
      const result = await API.fetchData('/config/list-column', params)
      this.formList.forEach(item => {
        if (columnField) {
          if (item.columnField === columnField) {
            this.$set(item, 'options', result)
          }
        } else {
          if (item.label === label) {
            this.$set(item, 'options', result)
          }
        }
      })
      this.selectInSearchLoading = false
    },
    selectSearch(value, options) {
      if (!value) {
        this.selectInSearchOptions.splice(0)
        return
      }
      this.selectInSearchLoading = true
      this.selectInSearchOptions = options.filter(
        item => item.supplierName.indexOf(value) > -1
      )
      this.selectInSearchLoading = false
    }
  },
  render(h) {
    const $style = this.$style
    const formList = this.formList.map((inputData, index) => {
      if ('defaultValue' in inputData) {
        this.formInput[inputData.name] =
          this.formInput[inputData.name] || inputData.defaultValue
      }
      const code = this.$router.history.current.query.purchaseCode
      if (code) {
        if (inputData.name === 'purchaseCode') {
          inputData.defaultValue = code
        }
      }
      // const codes = getQueryString('purchaseCodes')
      // if (codes) {
      //   if (inputData.name === 'purchaseCode') {
      //     inputData.defaultValue = codes.split(',')
      //   }
      // }
      return this.handleInputType(inputData)
    })
    const formRender = formList.slice(0, this.len /* 2 */)
    return (
      <div id={this.divId} class={$style.SearchForm}>
        <a-row gutter={24} class="small">
          {formRender}
          <a-col style="margin-left:auto;" span="8">
            <a-row type="flex" justify="end" ddddd>
              {this.formList.length > this.lenLimit ? (
                <span onClick={this.toggle}>
                  {this.len === this.lenLimit ? (
                    <a-button size="small" class="mr10" type={'link'}>
                      <a-icon type="down" /> {this.lang ? 'Show' : '更多筛选'}
                    </a-button>
                  ) : (
                    ''
                  )}
                  {this.len !== this.lenLimit ? (
                    <a-button size="small" class="mr10" type={'link'}>
                      <a-icon type="up" /> {this.lang ? 'Hide' : '收起筛选'}
                    </a-button>
                  ) : (
                    ''
                  )}
                </span>
              ) : (
                ''
              )}

              <a-col justify="end">
                <a-button
                  disabled={this.disabled}
                  size="small"
                  onClick={this.reset}
                >
                  {this.resetName || (this.lang ? 'Reset' : '重置')}
                </a-button>
              </a-col>
              <a-col type="flex" justify="end">
                <a-button
                  style="margin:0 16px;"
                  size="small"
                  onClick={this.search}
                  type="primary"
                >
                  {this.searchName || (this.lang ? 'Search' : '搜索')}
                </a-button>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
    )
  }
}
</script>

<style lang="less" module>
.SearchForm {
  & > div {
    display: flex;
    flex-wrap: wrap;
  }
  .col {
    margin-bottom: 6px;
  }

  .maxWidth {
    max-width: 298px;
  }
}
.label {
  font-size: 12px;
  font-family:
    PingFangSC-Regular,
    PingFang SC;
  font-weight: 400;
  color: #333333;
  text-align: right;
  margin-right: 6px;
}
.maxWidthSel {
  width: calc(100% - 8em);
  max-width: 300px;
}
.retote90 {
  transform: rotate(90deg);
  margin-right: 12px;
}
</style>
<style scoped>
.ant-row-flex {
  flex-wrap: nowrap !important;
}
.rotate {
  transform: rotate(-90deg);
}
</style>
